import React, { useState, Component } from 'react';
import {  FrownOutlined, SmileOutlined } from '@ant-design/icons';
import '../../../../assets/styles/Controlpage/Fengshan.css'
import { Switch, Slider } from 'antd';
const IconSlider = (props) => {
    const { max, min } = props;
    const [value, setValue] = useState(0);
    const mid = Number(((max - min) / 2).toFixed(5));
    const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
    const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
    return (
        <div className="icon-wrapper">
            <FrownOutlined className={preColorCls} />
            &nbsp;&nbsp;&nbsp;
            <Slider {...props} onChange={setValue} value={value} />
            &nbsp;&nbsp;&nbsp;
            <SmileOutlined className={nextColorCls} />
        </div>
    );
};

class Fengshan extends Component {
    state={
       img:'',
       item:1,
       ksig4: null,
    }
    render() {
        const men1 = () => {
            this.props.aaa()
            // this.setState({
            //     ksig1: !this.state.ksig1
            // })

        }
        // const fen = (defaultChecked) => {
        //     if(defaultChecked){
        //         this.state.img.style.animation= `rotate ${this.state.item}s linear infinite`;
        //     }else{
        //         this.state.img.style.animationPlayState= 'paused';
        //     }
        // }
        const onAfterChange = (value) => {
            
            // this.setState({
            //     ...this.state,
            //     item:value
            // })
            // console.log(this.state);

            this.setState(function(prevState, props){

                return {item:1 - value*0.01}
     
     });
     if(true){
        this.state.img.style.animation= `rotate ${this.state.item}s linear infinite`;
    }else{
        this.state.img.style.animationPlayState= 'paused';
    }

          };
          const keig4 = this.state.ksig4
          const y = { animation:`rotate ${this.state.item}s linear infinite` }
          const y1 = {  animationPlayState: 'paused' }
        return (
            <div>
                <p>&nbsp;风扇</p>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={this.state.ksig4} className="kaiguan" onClick={(checked) => { men1(checked) }} />
                <img src={require('../../../../assets/Image/kongzhiye_13.png')} className='img'   style={ keig4? y:y1}/>
                <IconSlider max={100} min={1}  className="huadong" onAfterChange={onAfterChange}/>
            </div>
        );
    }
    componentDidMount() {
        var img = document.querySelector('.img')
        this.setState({
            img
        })
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.value !== prevState.ksig1) {
            return {
                ksig4: nextProps.value
            }
        } else {
            return null
        }
    }
    
}

export default Fengshan;
